<template>
	<div class="container">
		<el-row>
			<el-col :span="24" class="institutionTitle">
				<p>机构列表</p>
			</el-col>
		</el-row>
		<section class="institutionContent">
			<el-row class="institutionContent-filter">
				<!--查询医疗机构-->
				<el-col :span="23" class="searchInstitution">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item>
							<el-select v-model="formInline.region" placeholder="---机构性质---">
								<el-option label="企业单位" value="企业单位"></el-option>
								<el-option label="教育机构" value="教育机构"></el-option>
								<el-option label="公立医院" value="公立医院"></el-option>
								<el-option label="私立医院" value="私立医院"></el-option>
								<el-option label="政府部门" value="政府部门"></el-option>
								<el-option label="科研院所" value="科研院所"></el-option>
								<el-option label="其他" value="其他"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-input v-model="formInline.institutionName" placeholder="机构名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="search" @click="getinstitutionList">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<!--新增机构-->
				<el-col :span="1" @click.native="handleAdd">
					<el-button type="primary" class="addInstitution">
						<i class="fa fa-plus" aria-hidden="true"></i>
						<span>新增机构</span>
					</el-button>
				</el-col>
			</el-row>
			<!--医疗机构表格-->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column label="机构名称" width="180" :show-overflow-tooltip="true">
					<template scope="scope">
						<span>{{ scope.row.institutionName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="机构性质" width="120">
					<template scope="scope">
						<span>{{ scope.row.institutionType }}</span>
					</template>
				</el-table-column>
				<el-table-column label="联系人" width="180">
					<template scope="scope">
						<span>{{ scope.row.contacts }}</span>
					</template>
				</el-table-column>
				<el-table-column label="电话" width="180">
					<template scope="scope">
						<span>{{ scope.row.telephone }}</span>
					</template>
				</el-table-column>
				<el-table-column label="地址" :show-overflow-tooltip="true">
					<template scope="scope">
						<span>{{ scope.row.address }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" width="200" :show-overflow-tooltip="true">
					<template scope="scope">
						<span> {{scope.row.createTime}} </span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template scope="scope">
						<span size="small" @click="handleEdit(scope.$index, scope.row)" class="editInstitution"><i class="el-icon-edit"></i>更新</span>
					</template>
				</el-table-column>
			</el-table>
			<!--新增机构页面-->
			<el-dialog title="新增机构" v-model="addFormVisible" :close-on-click-modal="false">
				<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
					<el-form-item label="机构名称" prop="institutionName">
						<el-input v-model="addForm.institutionName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="机构性质" prop="institutionType">
						<el-select v-model="formInline.institutionType" placeholder="---机构性质---">
							<el-option label="企业单位" value="1"></el-option>
							<el-option label="教育机构" value="2"></el-option>
							<el-option label="公立医院" value="3"></el-option>
							<el-option label="私立医院" value="4"></el-option>
							<el-option label="政府部门" value="5"></el-option>
							<el-option label="科研院所" value="6"></el-option>
							<el-option label="其他" value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="addForm.contacts" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="电话" prop="telephone">
						<el-input v-model="addForm.telephone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input type="textarea" v-model="addForm.address"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
				</div>
			</el-dialog>
			<!--编辑页面-->
			<el-dialog title="编辑机构信息" v-model="editFormVisible" :close-on-click-modal="false">
				<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
					<el-form-item label="机构名称" prop="institutionName">
						<el-input v-model="editForm.institutionName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="机构性质" prop="institutionType">
						<el-select v-model="formInline.institutionType" placeholder="---机构性质---">
							<el-option label="企业单位" value="1"></el-option>
							<el-option label="教育机构" value="2"></el-option>
							<el-option label="公立医院" value="3"></el-option>
							<el-option label="私立医院" value="4"></el-option>
							<el-option label="政府部门" value="5"></el-option>
							<el-option label="科研院所" value="6"></el-option>
							<el-option label="其他" value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="editForm.contacts" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="电话" prop="telephone">
						<el-input v-model="editForm.telephone" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input type="textarea" v-model="editForm.address"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
				</div>
			</el-dialog>
			<div class="block" style="text-align: right;margin-top: 20px;">
				<el-pagination layout="prev, pager, next" :total="100">
				</el-pagination>
			</div>
		</section>
	</div>
</template>
<style lang="scss" scoped>
	$bgTiltle:#3c8dbc;
	.container {
		.institutionTitle {
			text-align: left;
			font-size: 22px;
			color: #444;
			height: 60px;
			border-bottom: 4px solid #cdd1da;
			line-height: 60px;
			padding-left: 20px;
		}
		.institutionContent {
			background-color: #fff;
			padding: 10px;
			.institutionContent-filter {
				margin: 16px 10px;
			}
			.searchInstitution {
				float: right;
				text-align: right;
			}
			.editInstitution {
				color: $bgTiltle;
				cursor: pointer;
			}
			.editInstitution:hover {
				text-decoration: underline;
			}
			.el-icon-edit {
				color: $bgTiltle;
				font-size: 13px;
				padding-right: 2px;
			}
			.el-form-item__label {
				font-size: 20px;
				font-weight: bolder;
			}
		}
	}
</style>
<script>
	import util from '../../common/util';
	export default {
		data() {
			return {
				// filter
				formInline: {
					institutionName: '',
					institutionType: ''
				},
				tableData: [{
					institutionName: '九峰医疗',
					institutionType: '企业单位',
					contacts: '王小虎',
					telephone: '13612346523',
					address: '上海市浦东新区周浦镇康新公路3399号25号楼1楼',
					createTime: util.formatDate.format(new Date(), 'yyyy年MM月dd日 hh:mm:ss')
				}, {
					institutionName: '上海市浦东新区周浦医院',
					institutionType: '公立医院',
					contacts: '张晓虎',
					telephone: '13612346523',
					address: '上海市浦东新区周浦镇康新公路3399号25号楼1楼',
					createTime: util.formatDate.format(new Date(), 'yyyy年MM月dd日 hh:mm:ss')
				}, {
					institutionName: '九峰医疗',
					institutionType: '企业单位',
					contacts: '王小虎',
					telephone: '13612346523',
					address: '上海市浦东新区周浦镇康新公路3399号25号楼1楼',
					createTime: util.formatDate.format(new Date(), 'yyyy年MM月dd日 hh:mm:ss')
				}, {
					institutionName: '九峰医疗',
					institutionType: '企业单位',
					contacts: '王小虎',
					telephone: '13612346523',
					address: '上海市浦东新区周浦镇康新公路3399号25号楼1楼',
					createTime: util.formatDate.format(new Date(), 'yyyy年MM月dd日 hh:mm:ss')
				}],
				addFormVisible: false,
				addLoading: false,
				addFormRules: {
					institutionName: [{
						required: true,
						message: '请输入机构名称',
						trigger: 'blur'
					}],
					telephone: [{
						required: true,
						pattern: /^1[345678]\d{9}$/,
						message: '请输入正确的手机号',
						trigger: 'blur'
					}]
				},
				addForm: {
					institutionName: '',
					institutionType: ''
				},
				editFormVisible: false,
				editLoading: false,
				editFormRules: {
					institutionName: [{
						required: true,
						message: '请输入机构名称',
						trigger: 'blur'
					}],
					telephone: [{
						required: true,
						pattern: /^1[345678]\d{9}$/,
						message: '请输入正确的手机号',
						trigger: 'blur'
					}]
				},
				editForm: {
					id: 0,
					institutionName: ''
				}

			}
		},
		methods: {
			// formatter
			//			formatDate:function(time){
			//				return  util.formatDate.format(row.createTime, 'yyyy年MM月dd日 hh:mm:ss');
			//			},
			getinstitutionList() {
				let param = {
					institutionName: this.formInline.institutionName,
					institutionType: this.formInline.institutionType
				}
				// need queryInstitution api
				console.log('submit!');
			},
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			handleAdd: function() {
				this.addFormVisible = true;
				this.addForm = {
					institutionName: ''
				}
			},
			editSubmit: function() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						this.$confirm("确认提交吗？", '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							closeOnClickModal: false,
							type: 'warning'
						}).then(() => {
							this.editLoading = true;
							this.param = Object.assign({}, this.editForm);
							// need editInstitution api
							console.log(this.param);
							this.$message({
								type: 'success',
								message: '更新成功!'
							});
							this.editFormVisible=false;
							this.editLoading = false;
						})
					}
				})
			},
			addSubmit: function() {
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						this.$confirm("确认提交吗？", '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							closeOnClickModal: false,
							type: 'warning'
						}).then(() => {
							this.editLoading = true;
							this.param = Object.assign({}, this.addForm);
							// need addInstitution api
							console.log(this.param);
							this.addFormVisible=false;
							this.editLoading = false;
						})
					}
				})
			},
			mounted() {
				this.getinstitutionList();
			}
		}
	}
</script>